<template>
  <div>
    <el-radio-group v-model="direction">
      <el-radio label="ltr">从左往右开</el-radio>
      <el-radio label="rtl">从右往左开</el-radio>
      <el-radio label="ttb">从上往下开</el-radio>
      <el-radio label="btt">从下往上开</el-radio>
    </el-radio-group>
    <el-button type="primary" @click="open">抽屉盒子</el-button>
    <Drawer ref="Drawer" :direction="direction"></Drawer>
  </div>
</template>

<script>
import Drawer from '@/components/Drawer'
import elCloseDrawer from '@/directive/el-close-drawer'
export default {
  components: { Drawer },
  data () {
    return {
      show: false,
      direction: 'rtl'
    }
  },
  directives: {
    elCloseDrawer
  },
  methods: {
    open () {
      this.$refs.Drawer.show()
    }
  }
}
</script>

<style lang="scss" scoped>
.test-div {
  width: 200px;
  height: 200px;
  background: salmon;
  margin: 0 auto;
}
</style>
